<template>
    <div class="worek">
        <div class="result">
            <el-row :gutter="20">
                <el-col :span="6" v-for="item in statistics" :key="item.title">
                    <div>
                        <el-statistic group-separator="," :value="item.value" :title="item.title">
                            <template slot="title">
                                <div class="custom-title">{{ item.title }}</div>
                            </template>
                            <template slot="value">
                                <div class="custom-value">{{ item.value }}</div>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="indexx">
        <div>
            <el-image :src="comtableData.image1" fit="cover"></el-image>
            <!-- 按钮组在图片下方 -->
            <el-row :gutter="10" class="upload-buttons">
                <el-col :span="24">
                    <el-upload class="upload-demo"  action="api/admin/upload1"
                        :headers="headers" :data="uploadParams" accept="image/jpg,image/jpeg" :limit="limitNum"
                        :on-exceed="handleExceed" :on-success="handleSuccess1" :before-upload="handleBeforeUpload"
                        style="margin-top:10px">
                        <el-button size="small" type="danger" @click="handleUpload(scope.row)">图片上传</el-button>
                    </el-upload>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-image :src="comtableData.image2" fit="cover"></el-image>
            <!-- 按钮组在图片下方 -->
            <el-row :gutter="10" class="upload-buttons">
                <el-col :span="24">
                    <el-upload class="upload-demo"  action="api/admin/upload2"
                        :headers="headers" :data="uploadParams" accept="image/jpg,image/jpeg" :limit="limitNum"
                        :on-exceed="handleExceed" :on-success="handleSuccess1" :before-upload="handleBeforeUpload"
                        style="margin-top:10px">
                        <el-button size="small" type="danger" @click="handleUpload(scope.row)">图片上传</el-button>
                    </el-upload>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-image :src="comtableData.image3" fit="cover"></el-image>
            <!-- 按钮组在图片下方 -->
            <el-row :gutter="10" class="upload-buttons">
                <el-col :span="24">
                    <el-upload class="upload-demo"  action="api/admin/upload3"
                        :headers="headers" :data="uploadParams" accept="image/jpg,image/jpeg" :limit="limitNum"
                        :on-exceed="handleExceed" :on-success="handleSuccess1" :before-upload="handleBeforeUpload"
                        style="margin-top:10px">
                        <el-button size="small" type="danger" @click="handleUpload(scope.row)">图片上传</el-button>
                    </el-upload>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-image :src="comtableData.image4" fit="cover"></el-image>
            <!-- 按钮组在图片下方 -->
            <el-row :gutter="10" class="upload-buttons">
                <el-col :span="24">
                    <el-upload class="upload-demo"  action="api/admin/upload4"
                        :headers="headers" :data="uploadParams" accept="image/jpg,image/jpeg" :limit="limitNum"
                        :on-exceed="handleExceed" :on-success="handleSuccess1" :before-upload="handleBeforeUpload"
                        style="margin-top:10px">
                        <el-button size="small" type="danger" @click="handleUpload(scope.row)">图片上传</el-button>
                    </el-upload>
                </el-col>
            </el-row>
        </div>
    </div>
    </div>
</template>
<script>

import axios from 'axios'
export default {
    name: 'MyStatistic',
    inject: ['reload'],
    data() {
        return {
            like: true,
            comtableData:[],
            statistics: [],// 用于存储查询回来的数据
            images: [
                { url: 'image1.jpg' },
                { url: 'image2.jpg' },
                { url: 'image3.jpg' },
                { url: 'image4.jpg' },
            ],
            dateRange: ['', ''],
            selectedOption: '',
            headers: {
                'token': localStorage.getItem('token')
            },
            uploadParams: {
                id: 100
            },
            limitNum: 1 // 限制上传数量

        };
    },
    mounted() {
    },
    computed: {
        imageRows() {
            // 使用 reduce 方法将 images 数组分组为每行两张图片的数组
            return this.images.reduce((rows, src, index) => {
                if (index % 2 === 0) {
                    rows.push([src]);
                } else {
                    rows[rows.length - 1].push(src);
                }
                return rows;
            }, []);
        },
    },

    methods: {
        loadData() {
            axios.get(`api/admin/info`).then((res) => {           
                this.comtableData = res.data.data
            }).catch((error) => {
                console.error(error);
                this.$message.error('错误')
            });
        },

        fetchData() {
            axios.get('api/admin/queryAll')
                .then(response => {
                    if (response.data && typeof response.data === 'object') {
                        // 从响应数据中获取属性并创建统计信息数组
                        this.statistics = [
                            { value: response.data.data.newsNum, title: "新闻数量" },
                            { value: response.data.data.projectNum, title: "项目数量" },
                            { value: response.data.data.employNum, title: "招聘数量" },
                            { value: response.data.data.teamNum, title: "成员数量" }
                        ];
                    } else {
                        console.error('响应数据格式不正确:', response.data);
                    }
                })
                .catch(error => {
                    console.error('请求错误:', error);
                });
        },

        // 照片文件超出个数限制时的钩子
        handleExceed(files, fileList) {
            this.$notify.warning({
                title: '警告',
                message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
            })
        },
        // 上传照片文件之前的钩子
        handleBeforeUpload(file) {
            console.log(file.type)
            if (!(file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                this.$notify.warning({
                    title: '警告',
                    message: '请上传格式为image/jpg的图片'
                })
            }
            // const size = file.size / 1024 / 1024
            // if (size > 1) {
            //     this.$notify.warning({
            //         title: '警告',
            //         message: '图片大小必须小于1M'
            //     })
            // }
        },
        handleSuccess1() {
            this.dialogImageUrl = ''
            this.reload()
            this.$notify({
                title: '恭喜',
                message: '添加图片成功',
                type: 'success',
                duration: 5000
            })
        },
        // 上传图片
        handleUpload(row) {
            this.uploadParams.id = row.id
            console.log(row);
            const token = localStorage.getItem('token'); // 确保这个函数返回有效的token
            this.headers = {
                'Authorization': `Bearer ${token}`
            };
        },
    },
    created() {
        this.fetchData(),
        this.loadData()
    },
}
</script>

<style scoped>
.worek {
    animation: floatUp 1s ease-in-out;
}

.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
}

.result {
    background: #fff;
}

.custom-title {
    margin-top: 20px;
    margin-bottom: 20px;
}

.custom-value {
    margin-top: 20px;
}
.indexx {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
}

.indexx > div {
  flex: 0 0 48%;
  box-sizing: border-box;
  padding: 5px;
}

.indexx > div:nth-child(even) {
  margin-left: 4%;
}

.el-image {
  width: 100%;
  height: 90%;
  display: block;
  border-radius: 2%;
}
</style>